<template>
	<view
		:style="'order:'+item.order+';'+item.css"
		class="list-simple-sorting">
		<template v-if="listStatus == 'success'">
			<view
				class="_for"
				@click="$_to('post/detail?pid=' + item.pid)"
				v-for="(item, index) in list" :key="index">
				<text class="_digit">{{index+1}}.</text>
				<text class="_group" v-if="item.group">
					[{{item.group.name}}]
				</text>
				<text class="_title">
					{{item.title?item.title:$_filterHtml(item.content)}}
				</text>
			</view>
			<view
				class="more-content"
				v-if="item.page"
				@click="clickMoreButton">
				{{listPageText}}
			</view>
		</template>
		<template v-if="listStatus == 'loading'">
			<global-loading></global-loading>
		</template>
		<template v-if="listStatus == 'empty'">
			<global-empty></global-empty>
		</template>
	</view>
</template>

<script>
	export default {
		name:"list-simple-sorting",
		props:{
			item:{
				type:Object,
				default:null
			}
		},
		data() {
			return {
				list:[],
				listStatus:"loading",
				listPage:2,
				listPageText: this.$t('clickToLoadMore')
			};
		},
		mounted(){
			this.getList();
		},
		methods: {
			getList(){
				this.$_request(
					"GET", "/api/fresns/v1/post/list",
					{
						...this.item.query,
						"filterType":"whitelist",
						"filterKeys":"pid,group,title,content",
						"filterGroupType":"whitelist",
						"filterGroupKeys":"name",
						"page":1
					},
					(res) => {
						if (res.data.data.list.length) {
							this.list = res.data.data.list;
							this.listStatus = "success";
						} else {
							this.listStatus = "empty";
						}
					}
				)
			},
			clickMoreButton(){
				if (this.listPageText == this.$t('loading')) { return }
				this.listPageText = this.$t('loading');
				this.$_request(
					"GET", "/api/fresns/v1/post/list",
					{
						...this.item.query,
						"filterType":"whitelist",
						"filterKeys":"pid,group,title,content",
						"filterGroupType":"whitelist",
						"filterGroupKeys":"name",
						"page": this.listPage
					},
					(res) => {
						if (res.data.data.list.length) {
							this.list = this.list.concat(res.data.data.list);
							this.listPage++
							this.listPageText = this.$t('clickToLoadMore')
						} else {
							this.listPageText = this.$t('listEmpty')
						}
					}
				)
			}
		},
	}
</script>

<style lang="scss" scoped>
.list-simple-sorting{
	
	.more-content{
		padding: 20rpx 0;
		font-size: 22rpx;
		line-height: 22rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: $placeholder;
	}
	._for{
		display: flex;
		align-items: center;
		line-height: 28rpx;
		border-bottom: 1px solid $background;
		padding: 20rpx 0;
		._digit{
			flex-shrink: 0;
			color: $placeholder;
			padding-right: 5rpx;
			font-style: italic;
			font-weight: bold;
		}
		._group{
			color: $placeholder;
			font-size: 18rpx;
			padding: 0 5rpx;
		}
		._title{
			font-size: 28rpx;
			line-height: 28rpx;
			flex: 1;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			overflow: hidden;
		}
	}
	._for:nth-child(1){
		._digit{
			color: $red;
		}
	}
	._for:nth-child(2){
		._digit{
			color: $blue;
		}
	}
	._for:nth-child(3){
		._digit{
			color: $green;
		}
	}
	._for:last-child{
		padding-bottom: 0;
		border-bottom: 0;
	}
}
</style>